<template>
  <div class="container">
    <div class="top">
      <img :src="data.coverUrl" alt="" />
      <div class="right">
        <p><span>电台节目·</span>{{ data.name }}</p>
        <span>{{ radio.name }}</span><button>订阅({{ radio.subCount }})</button>
      </div>
    </div>
    <div class="bottom">
      <button>{{ formatTime(data.duration) }}</button>
      <button>点赞({{ data.likedCount }})</button>
      <button>评论({{ data.commentCount }})</button>
      <button>分享({{ data.shareCount }})</button>
      <button>下载</button>
      <a href="#">生成外链播放器</a>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router'
import axios from "axios"
const route = useRoute()
const data = ref({})
const radio = ref({})
onMounted(() => {
  // 拿到id
  // console.log(route.query.id);
  axios.get(`http://122.112.161.135:3000/dj/program/detail?id=${route.query.id}`).then((res) => {
    // 请求拿到电台数据
    data.value = res.data.program
    radio.value = res.data.program.radio
  })
})
//格式化时间
const formatTime = computed(() => {
  return (time) => {
    const minutes = Math.floor(time / 60000)
    const seconds = Math.floor((time / 60000 - minutes) * 60)
    return `播放${minutes}分${seconds}秒`
  }
})
</script>
<style scoped>
.container {
  width: 50%;
  margin: 60px auto;
  font-size: 12px;
  background-color: #fff;
  padding: 20px;
}

.top {
  display: flex;
  margin-bottom: 15px;
}

.top img {
  width: 140px;
  height: 140px;
  margin-right: 20px;
}

.right p {
  font-size: 20px;
  width: 450px;
  margin-bottom: 20px;
}

.right p span {
  background-color: #cd1616;
  color: #fff;
  padding: 0 5px;
}

.right span {
  font-size: 16px;
  color: #999;
  margin-right: 20px;
}

.right button {
  background-color: transparent;
  border: 1px solid #666;
  border-radius: 5px;
  padding: 2px 5px;
}

.bottom button {
  padding: 2px 10px;
  margin-right: 25px;
  border-radius: 5px;
  border: 1px solid #999;
}

.bottom button:first-child {
  background-color: #1e6fbf;
  color: #fff;
}

.bottom a {
  color: #0c73c2;
}
</style>